<template>
  <div class="app">
    <!-- 头部区域 -->
    <div class="header">
      <!-- <div
        style="position:absolute;left:0;top:0;"
        @click="$router.go(-1)"
        v-if="$route.path!='/home'"
        class="goback"
      >
        <van-icon name="arrow-left" style="margin-right:3px;vertical-align:middle;"></van-icon>
        <span style="vertical-align:middle;">返回</span>
      </div> -->
      <van-nav-bar
        title="黑马商城.vant"
        :left-text="$route.path!='/home'?'返回':''"
        :left-arrow="$route.path!='/home'"
        @click-left="$router.go(-1)"
      />
    </div>
    <!-- 路由占位符区域 -->
    <div class="main">
      <transition mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <!-- tabbar区域 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" dot to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :info="$store.getters.count" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {}
};
</script>
<style scoped lang="less">
html,
body,
.app {
  height: 100%;
}
.app {
  box-sizing: border-box;
  padding: 46px 0 50px 0;
}
.header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: hotpink;
  color: #fff;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
.main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.v-enter {
  transform: translateX(100%);
}
.v-enter-active {
  transition: transform 0.3s ease;
}
.v-enter-to {
  transform: translateX(0);
}

.v-leave {
  opacity: 1;
}
.v-leave-active {
  transition: opacity 0.3s;
}
.v-leave-to {
  opacity: 0.4;
}
.van-nav-bar{
  background:hotpink;
  .van-nav-bar__title{
    color: #fff;
  }
}
.van-tabbar{
  background-color: #ddd;
}
div{
  // 解决文字抖动的问题
  backface-visibility:hidden;
}
</style>